import React from 'react';
import ReactDom from 'react-dom';
import {Button,Menu,Modal,Icon,Tabs,message,Form,Input,CheckBox} from 'antd';
import 'antd/dist/antd.css';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const MenuItemGroup = Menu.MenuItemGroup;
import { Row,Col } from 'antd';
import {Router, Route, Link, hashHistory} from 'react-router';

class Login extends React.Component{
	constructor(){
		super();
	}
	componentWillMount(){

	}
	handleSubmit(e) {
      e.preventDefault();
      var fromdate;
      this.props.form.validateFields((err, values) => {
      if (!err) {
        fromdate=values;
      }
      });
      var res = fetch("/admin/login",{
      	method:"post",
      	headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
      	body:"username="+fromdate.userName+"&password="+fromdate.passWord,
      	});
      res.then(response => response.json()).then(json=>{
      	if(json.state){
      		localStorage.logined = true;
      		localStorage.username = fromdate.userName;
      		window.location.reload();
      	}else{
      		message.error(json.mes);
      	}
      });
    }
    render(){
    	const { getFieldDecorator } = this.props.form;
    	return (
    		<div>
    			<Row>
    				<Col span={8}></Col>
    				<Col span={8}>
						<Tabs defaultActiveKey="1" type="card">
							<TabPane tab={<span>登录</span>} key="1">
							<Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)} className="login-form">
								<FormItem>
						          {getFieldDecorator('userName', {
						            rules: [{ required: true, message: 'Please input your username!' }],
						          })(
						            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
						          )}
						        </FormItem>
						        <FormItem>
						          {getFieldDecorator('passWord', {
						            rules: [{ required: true, message: 'Please input your passWord!' }],
						          })(
						            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="passWord" />
						          )}
						        </FormItem>
						        <Button type="primary" htmlType="submit" className="login-form-button">
					                Log in
					            </Button>
						    </Form>
							</TabPane>
						</Tabs>
    				</Col>
    				<Col span={8}></Col>
    			</Row>
    		</div>
    	);
    }
};
export default Login = Form.create({})(Login);